<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2016/11/2
  Time: 19:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/mb/jsp/common.jsp" %>

<%@ page import="com.limao.CacheManager.CrowdSysProjectCache" %>
<%@ page import="com.limao.DBDataClass.CrowdProjectBuyClass" %>
<%@ page import="com.limao.DBDataClass.CrowdSysDiscussDataClass" %>
<%@ page import="com.limao.DBDataClass.CrowdSysProjectClass" %>
<%@ page import="com.limao.Model.PublicData" %>
<%@ page import="com.limao.servlet.WebFunction" %>
<%@ page import="com.wsu.search.tools.Tools" %>

<%
    //取得url带过来的参数
    String projectid = Tools.RmNull(request.getParameter("projectid"));
    CrowdSysProjectClass crowd = CrowdSysProjectCache.getInstance().load_Goods_Info_ById(CacheClass.getIntValue(projectid));

    PublicData discusses = null;
    discusses = WebFunction.getProjeChatInfo(projectid, "1");

    PublicData surpports = null;
    surpports = WebFunction.getProjectBuyUserInfo(projectid, "1");

%>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品详情</title>

    <script type="text/javascript">

        $(document).ready(function () {
//            图片滑动
            $dragBln = false;
            $(".main_image_detail").touchSlider({
                flexible: true,
                speed: 200,
                btn_prev: $("#btn_prev"),
                btn_next: $("#btn_next"),
                paging: $(".flicking_con a"),
                counter: function (e) {
                    $(".flicking_con a").removeClass("on").eq(e.current - 1).addClass("on");
                }
            });

            $(".main_image_detail").bind("mousedown", function () {
                $dragBln = false;
            });

            $(".main_image_detail").bind("dragstart", function () {
                $dragBln = true;
            });

            $(".main_image_detail a").click(function () {
                if ($dragBln) {
                    return false;
                }
            });
            $(".main_visual_detail").hover(function () {
//                clearInterval(timer);
            }, function () {
                timer = setInterval(function () {
                    $("#btn_next").click();
                }, 5000);
            });

            $(".main_image_detail").bind("touchstart", function () {
                clearInterval(timer);
            }).bind("touchend", function () {
                timer = setInterval(function () {
                    $("#btn_next").click();
                }, 5000);
            });

            //            进度条
            $(".bar_span").each(function () {
                var ress = $(this).attr('width');
                var len = ress + "%";
                console.log(len);
                $(this).animate({
                    width: len
                });

            })
        });
    </script>
</head>
<body ontouchstart="">
<div class="detailTop pf w100 of">
    <div class="w100 of tc c3 f18">
        <span class="pa" style="left: 2px;" onclick="javascript:history.back();"><img src="mb/images/top_back.png"
                                                                                      style="margin-top: 4px;height: 40px;width: 40px;"/></span>
        商品详情
        <!-- <div class="dib of pa" style="right: 10px;">
            <a href="mb/riskWarning.html" class="dib tc">退货说明</a>
        </div> -->
    </div>
</div>

<div class="container jz">
    <div class="main_visual_detail">
        <div class="flicking_con w100">
            <div class="dib jz">
             <%int stocknum=0; 
         if (crowd != null) 
         {
            
			if((CacheClass.getIntValue(crowd.limitenum)-CacheClass.getIntValue(crowd.supportnum))>0)
			      stocknum=CacheClass.getIntValue(crowd.limitenum)-CacheClass.getIntValue(crowd.supportnum);
                        String[] projectimages = null;
                        if (!TextUtils.isEmpty(crowd.projectimage)) {
                            projectimages = crowd.projectimage.split(";");
                        }

                        if (projectimages != null) {
                            for (int i = 0; i < projectimages.length; i++) {
                                String img = projectimages[i];
                %>
                <a href="#"><%=i%>
                </a>
                <%
                        }
                    }
                    
                    
                %>
            </div>

        </div>

        <div class="main_image_detail">
            <ul>
                <%
                    if (projectimages != null) {
                        for (int i = 0; i < projectimages.length; i++) {
                            String img = projectimages[i];
                %>
                <li><span
                        style="background:url('<%=getImageBasePath(img)%>') center top no-repeat;background-size: cover"
                        ;></span></li>
                <%
                            }
                        }
                    }
                %>
            </ul>
        </div>
    </div>
    <!--main_visual_detail-->
    <section class="proSection pr w100 bcf" style="padding-top: 13px;padding-bottom: 3px;">
         <div style="margin-left:3%;">
	         <h5 class="c3 f13 mgt10 lh2">深圳市朱丽树萌保险品销售有限公司 </h5>
	         <p class="c6 f12 lh2">狸猫豆：200</p>
	         <p class="c6 f12 lh18">实价：200.00　｜　回购价：180.00</p>
	         <p class="c6 f12 lh18" style="margin-top: 3px;">已售：468　｜　库存：5463545655</p>
         </div>
    </section>
    <section class="proSection pr w100 bcf">
        <div class="detailCompany w100">
            <h4 class="f14 c3 jz">商品简介</h4>
            <p class="detailInfo c9 f12 jz">
                <%=crowd.intro%>
            </p>
        </div>
    </section>
    <!--  <section class="proSection pr w100 bcf">
        <div class="detailCompany w100">
            <h4 class="f14 c3 jz">商家</h4>
            <div class="of clearfix jz">
                <img src="<%=getImageBasePath(crowd.companylogo)%>" class="dib fl">
                <div class="fl dib">
                    <h5 class="c3 f14"><%=crowd.companyname%>
                    </h5>
                    <p class="c9 f12" style="margin-top: 3px;"><%=crowd.address%>
                    </p>
                </div>
            </div>
        </div>
    </section>-->

    <div id="introDetail" class="w100 of bcf">
        <div>
            <ul class="introTab">
                <li class="introtab_current"><span>图片简介</span></li>
                <li style="display:none"><span>话题<i class="c6 f12">(<%=crowd.disscussnum%>)</i></span>
                    <div class="tabLineLeft"></div>
                    <div class="tabLineRight"></div>
                </li>
                <li style="display:none"><span>购买者<i class="c6 f12">(<%=crowd.supportnum%>)</i></span></li>
            </ul>
        </div>
        <div class="introtab_content">
            <article style="display:block;">
                <%
                    String[] introimages = null;
                    if (!TextUtils.isEmpty(crowd.introimage)) {
                        introimages = crowd.projectimage.split(";");
                    }

                    if (introimages != null) {
                        for (int i = 0; i < introimages.length; i++) {
                            String img = introimages[i];
                %>
                <img src="<%=getImageBasePath(img)%>" class="w100 hauto" style="margin-bottom: 7px;">
                <%
                        }
                    }
                %>
            </article><!--产品-->

            <article>
                <div class="speakText w100 of">
                    <textarea class="db" rows="1" placeholder="填写评论..." id="speakTextarea"></textarea>
                    <p class="f12 cred t2"></p>
                    <div class="clearfix of">
                        <input type="button" value="发表" onclick="newComment($('#speakTextarea'))"
                               class="db fr"/>
                    </div>
                </div>

                <div id="newSpeakAfter" class="newSpeakAfter"></div>

                <%
                    if (discusses != null && discusses.list != null && discusses.list.size() > 0) {
                        for (int i = 0; i < discusses.list.size(); i++) {
                            CrowdSysDiscussDataClass cdd = (CrowdSysDiscussDataClass) discusses.list.get(i);
                %>
                <div class="speakContainer of">
                    <div class="speakBlock of">
                        <h5 class="f12 c6"><%=cdd.username%>
                        </h5>
                        <h5 class="f12 cc lh2"><%=cdd.ctime%>
                        </h5>
                        <p class="c3 f14 lh15"><%=cdd.txt%>
                        </p>
                        <p><span id="<%=cdd.disscussid%>" class="aht f12 cblue dib pinglunReply"
                                 onclick="replyShow($(this), <%=cdd.disscussid%>, '<%=cdd.username%>');">回复</span></p>
                    </div>
                    <%
                        if (cdd.childlist != null && cdd.childlist.size() > 0) {
                            for (int j = 0; j < cdd.childlist.size(); j++) {
                                CrowdSysDiscussDataClass chd = cdd.childlist.get(j);
                    %>
                    <section class="replyBlock of">
                        <h5 class="f12 cblue"><%=chd.username%>
                        </h5>
                        <h5 class="f12 cc lh2"><%=chd.ctime%>
                        </h5>
                        <P class="c3 f14 lh15 t2">
                            <%=chd.txt%>
                        </P>
                    </section>
                    <%
                            }
                        }
                    %>
                </div>
                <%
                        }
                    }
                %>

                <div onclick="loadMoreDiscuss();" id="divloadmorediscuss" class="w100 of c6 f12 tc clickMore">点击加载更多
                </div>
            </article><!--话题-->
            <article>
                <div class="supporterContainer">

                    <%
                        if (surpports != null && surpports.list != null && surpports.list.size() > 0) {
                            for (int i = 0; i < surpports.list.size(); i += 2) {
                                CrowdProjectBuyClass cpbc1 = (CrowdProjectBuyClass) surpports.list.get(i);
                    %>
                    <div class="clearfix of w100">
                        <section class="fl">
                            <div class="of clearfix">
                                <img src="<%=getImageBasePath(cpbc1.avatar)%>" class="fl db">
                                <div class="fl" style="width: 68%;margin-left: 1%">
                                    <h4 class="f14 c6"><%=cpbc1.username%>
                                    </h4>
                                    <p><span class="f12 c9 fl">购买&nbsp;</span><i class="cff9933 fl">￥</i><span
                                            class="f16 cff9933 fl"><%=cpbc1.totalrmb%></span></p>
                                </div>
                            </div>
                        </section>
                        <%
                            if (i + 1 < surpports.list.size()) {
                                CrowdProjectBuyClass cpbc2 = (CrowdProjectBuyClass) surpports.list.get(i + 1);
                        %>
                        <section class="fr">
                            <div class="of clearfix">
                                <img src="<%=getImageBasePath(cpbc2.avatar)%>" class="fl db">
                                <div class="fl" style="width: 68%;margin-left: 1%">
                                    <h4 class="f14 c6"><%=cpbc2.username%>
                                    </h4>
                                    <p><span class="f12 c9 fl">购买&nbsp;</span><i class="cff9933 fl">￥</i><span
                                            class="f16 cff9933 fl"><%=cpbc2.totalrmb%></span></p>
                                </div>
                            </div>
                        </section>
                        <%
                            }
                        %>
                    </div>
                    <%
                            }
                        }
                    %>

                    <div class="w100 of c6 f12 tc mgt10 clickMore" id="divloadmoresurpport"
                         onclick="loadMoreSurpport();">点击加载更多
                    </div>
                </div>
            </article><!--支持者-->
        </div>
    </div>
    <script>
        var projectid = <%=crowd.projectid%>;

        $(function () {
            $("#speakTextarea").focus(function () {
                $("html,body").animate({scrollTop: $(".introtab_content").offset().top}, 700);
                $(".detailBottm").hide();
                $(".detailTop").hide();
            });
            $("#speakTextarea").blur(function () {
                $(".detailBottm").show();
                $(".detailTop").show();
            });
        });

        // tab切换
        $(function () {
            $('.introTab>li').mouseover(function () {
                var $t = $(this).index();
                $('.introTab>li').removeClass();
                $(this).addClass('introtab_current');
                $('.introtab_content>article').css('display', 'none');
                $('.introtab_content>article').eq($t).css('display', 'block');
            })
        });

        //新评论提交与发表
        function newComment(newCommentTextarea) {
            if (!islogin) {
                showToast("请先登录！")
                return false;
            }

            var newCommentVal = $.trim(newCommentTextarea.val());

            if (newCommentVal == "") {
                newCommentTextarea.next('p').text('你还未填写评论');
                return false;
            } else {
                newCommentTextarea.next('p').text('');
            }

            $.ajax({
                url: "PlugServlet",
                data: JSON.stringify({m: 1640, projectid: projectid, replayid: "0", text: newCommentVal}),
                type: 'post',
                dataType: 'json',
                beforeSend: function () {
                    showProgressDg();
                },
                success: function (data) {
                    if (data.state == 1) {
                        showToast("您的评论已发表成功");

                        // 刷新页面
                        setTimeout(function () { //关键的setTimeout
                            window.location.reload();
                        }, 500); //等待time秒执行
                    } else {
                        showToast(data.info);
                    }
                },
                error: function (data) {
                    showToast(data.info);
                },
                complete: function () {
                    closeProgressDg();
                }
            });
        }

        var disscussid = '';
        // 回复表单出现
        function replyShow(replyBtn, disid, username) {
            if (!islogin) {
                showToast("请先登录！");
                return false;
            }

            if (replyBtn.next('.replyForm').length != 0) {
                return false;
            }

            var replyBtn = replyBtn;
            disscussid = disid;

            var replyForm = '<div id="" class="replyForm bcf mgt20">' +
                    '<div class="tr clearfix of close-x jz">' +
                    '<span class="fr f34 c3 cursor" onclick="removeReplyForm($(this));">&times;</span>' +
                    '</div>' +
                    '<textarea id="" class="replyConentText db f14 c3 lh18 jz of" placeholder="回复@' + username + '："></textarea>' +
                    '<p class="w100 cred f122 tc lh2"></p>' +
                    '<div class="w100 clearfix of mgt10">' +
                    '<input type="button" name="" value="发表" id="" onclick="replySub($(this));" class="replySubBtn db fr cf tc f16 br3 cursor"/>' +
                    '</div>' +
                    '</div> <!--replyForm-->';

            replyBtn.after(replyForm);
        }

        // 回复表单关闭
        function removeReplyForm(replyClose) {
            var replyClose = replyClose;
            var replyFormHtml = replyClose.parents('.replyForm');
            replyFormHtml.remove();
        }


        // 回复提交并发表
        function replySub(replySub) {
            var replySub = replySub;
            var replyConentText = replySub.parent('div').siblings('.replyConentText');
            var replyConentTextVal = $.trim(replyConentText.val());

            if (replyConentTextVal == "") {
                replyConentText.next('p').text('你还未填写评论');
                return false;
            } else {
                replyConentText.next('p').text('');
            }

            $.ajax({
                url: "PlugServlet",
                data: JSON.stringify({m: 1640, projectid: projectid, replayid: disscussid, text: replyConentTextVal}),
                type: 'post',
                dataType: 'json',
                beforeSend: function () {
                    showProgressDg();
                },
                success: function (data) {
                    if (data.state == 1) {
                        showToast("回复成功！");

                        // 刷新页面
                        setTimeout(function () { //关键的setTimeout
                            window.location.reload();
                        }, 500); //等待time秒执行
                    } else {
                        showToast(data.info);
                    }
                },
                error: function (data) {
                    showToast(data.info);
                },
                complete: function () {
                    closeProgressDg();
                }
            });
        }

        // 加载更多话题
        var curDispage = 1;
        var totalDispage = <%=discusses.total%>;
        function loadMoreDiscuss() {
            if (curDispage < totalDispage) {
                curDispage++;

                $.ajax({
                    url: "LoginServlet",
                    data: JSON.stringify({m: 1540, projectid: projectid, curpage: curDispage}),
                    type: 'post',
                    dataType: 'json',
                    beforeSend: function () {
                        showProgressDg();
                    },
                    success: function (data) {
                        if (data.state == 1) {
                            // 加载更多话题
                            totalDispage = data.total;
                            addMoreDiscussItem(data.list);
                        } else {
                            showToast(data.info);
                        }
                    },
                    error: function (data) {
                        showToast(data.info);
                    },
                    complete: function () {
                        closeProgressDg();
                        if (curDispage < totalDispage) {
                            $("#divloadmorediscuss").text("点击加载更多");
                        } else {
                            $("#divloadmorediscuss").text("没有更多了");
                        }
                    }
                });
            } else {
                $("#divloadmorediscuss").text("没有更多了");
            }
        }

        function addMoreDiscussItem(data) {
            if (data == null) {
                return;
            }

            var html = '';

            for (var i = 0; i < data.length; i++) {
                html += getDiscussItemHtml(data[i])
            }

            $("#divloadmorediscuss").before($(html));
        }

        function getDiscussItemHtml(data) {
            var subhtml = '';

            if (data.childlist != null && data.childlist.length > 0) {
                for (var j = 0; j < data.childlist.length; j++) {
                    var childdata = data.childlist[j];

                    subhtml += '<section class="replyBlock of">' +
                            '<h5 class="f12 cblue">' + childdata.username + '</h5>' +
                            '<h5 class="f12 cc lh2">' + childdata.ctime + '</h5>' +
                            '<p class="c3 f14 lh15 t2">' +
                            childdata.txt +
                            '</p>' +
                            '</section>';
                }
            }

            var html = '<div class="speakContainer of">' +
                    '<div class="speakBlock of">' +
                    '<h5 class="f12 c6">' + data.username + '</h5>' +
                    '<h5 class="f12 cc lh2">' + data.ctime + '</h5>' +
                    '<P class="c3 f14 lh15">' + data.txt + '</P>' +
                    '<p><span class="aht f12 cblue dib pinglunReply" onclick="replyShow($(this),' + data.disscussid + ',\'' + data.username + '\');">回复</span></p>' +
                    '</div>' +

                    subhtml +

                    '</div> <!--speakContainer-->';


            return html;
        }

        // 加载更多支持者
        var curSurppage = 1;
        var totalSurppage = <%=surpports.total%>;
        function loadMoreSurpport() {
            if (curSurppage < totalSurppage) {
                curSurppage++;

                $.ajax({
                    url: "LoginServlet",
                    data: JSON.stringify({m: 1720, projectid: projectid, curpage: curSurppage}),
                    type: 'post',
                    dataType: 'json',
                    beforeSend: function () {
                        showProgressDg();
                    },
                    success: function (data) {
                        if (data.state == 1) {
                            // 加载更多支持者
                            totalSurppage = data.total;
                            addMoreSurpportItem(data.list);
                        } else {
                            showToast(data.info);
                        }
                    },
                    error: function (data) {
                        showToast(data.info);
                    },
                    complete: function () {
                        closeProgressDg();
                        if (curSurppage < totalSurppage) {
                            $("#divloadmoresurpport").text("点击加载更多");
                        } else {
                            $("#divloadmoresurpport").text("没有更多了");
                        }
                    }
                });
            } else {
                $("#divloadmoresurpport").text("没有更多了");
            }
        }

        function addMoreSurpportItem(data) {
            if (data == null) {
                return;
            }

            var html = '';

            for (var i = 0; i < data.length; i += 2) {
                html += getSurpportItemHtml(data, i)
            }

            $("#divloadmoresurpport").before($(html));
        }

        function getSurpportItemHtml(data, i) {
            var subhtml = '';
            if (i + 1 < data.length) {
                var subdata = data[i + 1];

                subhtml = '<section class="fr">'
                        + '<div class="of clearfix">'
                        + '<img src="images/touxiang.png" class="fl db">'
                        + '<div class="fl" style="width: 68%;margin-left: 1%">'
                        + '<h4 class="f14 c6">' + subdata.username + '</h4>'
                        + '<p><span class="f12 c9 fl">支持&nbsp;</span><i class="cff9933 fl">￥</i><span class="f16 cff9933 fl">' + subdata.totalmb + '</span></p>'
                        + '</div>'
                        + '</div>'
                        + '</section>';
            }

            var data1 = data[i];
            var html = '<div class="clearfix of w100">'
                    + '<section class="fl">'
                    + '<div class="of clearfix">'
                    + '<img src="images/touxiang.png" class="fl db">'
                    + '<div class="fl" style="width: 68%;margin-left: 1%">'
                    + '<h4 class="f14 c6">' + data1.username + '</h4>'
                    + '<p><span class="f12 c9 fl">购买&nbsp;</span><i class="cff9933 fl">￥</i><span class="f16 cff9933 fl">' + data1.totalmb + '</span></p>'
                    + '</div>'
                    + '</div>'
                    + '</section>'

                    + subhtml

                    + '</div>';


            return html;
        }

    </script>
</div>

<div class="detailBottm pf w100 of">
    
    <div class="w100 of clearfix">
    	<div class="fl" style="width:50%;">
		    <div class="addMin clearfix of w100">
			    <input id="min" name="" type="button" value="-"  style="width:20%;height:40px;"/>  
				<input id="text_box" name="" type="text" value="1" onkeyup="this.value=(this.value.match(/\d?/)||[''])[0]" style="width:60%;height:38px;"/>  
				<input id="add" name="" type="button" value="+" style="width:20%;height:40px;"/>  
			</div>
    	</div>
    	<div class="fl" style="width:50%;">
		   <a href="mb/jsp/myAddress.jsp?projectid=<%=projectid%>" class="db f18 cf f18 tc w100">购&nbsp;买</a>
    	</div>
    </div>
</div>

<script>
		$(document).ready(function(){
		//获得文本框对象
		   var t = $("#text_box");
		//初始化数量为1,并失效减
		$('#min').attr('disabled',true);
		    //数量增加操作
		    $("#add").click(function(){    
		        t.val(parseInt(t.val())+1)
		        if (parseInt(t.val())!=1){
		            $('#min').attr('disabled',false);
		        }
		      
		    }) 
		    //数量减少操作
		    $("#min").click(function(){
		        t.val(parseInt(t.val())-1);
		        if (parseInt(t.val())==1){
		            $('#min').attr('disabled',true);
		        }
		      
		    })
		   
		});
	</script> 
</body>
</html>